@import "header.html"
<link rel="stylesheet" href="../css/cancel_order.css">
<link rel="stylesheet" href="../css/mobileSelect.css">


<body>
<main id="main" v-cloak>


    <header class="fxj-header" v-cloak  v-show="pre_page.type1">
        <a href="#">  &nbsp;<</a>
        <h1 class="fxj-title" >取消订单原因</h1>
    </header>


    <header class="fxj-header"   v-cloak v-show="pre_page.type2" @click="show_page1">
        <a href="#">  &nbsp;<</a>
        <h1 class="fxj-title" v-cloak v-show="pre_page.type2">退款详情</h1>
    </header>




    <main  class="pub_main" v-show="pre_page.type1" v-cloak>
        <div class="mui-content">
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell infraCell" >
                    <span class="span_left" data-value="5">行程变更</span>
                    <span class="span_right span_circle circle_false" data="6"></span>
                </li>
                <li class="mui-table-view-cell infraCell" >
                    <span class="span_left" data-value="6">不能网上支付</span>
                    <span class="span_right span_circle circle_false" data="5"></span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="7">无法联系房东</span>
                    <span class="span_right span_circle circle_false" data="4"></span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="8">房屋售罄</span>
                    <span class="span_right span_circle circle_false"data="3"></span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="9">已找到更好的房源</span>
                    <span class="span_right span_circle circle_false" data="2"></span>
                </li>
                <li class="mui-table-view-cell infraCell">
                    <span class="span_left" data-value="10">其他原因</span>
                    <span class="span_right span_circle circle_false"data="1"></span>
                </li>
            </ul>
        </div>
    </main>


    <main  class="pub_main" v-show="pre_page.type2" v-cloak>
        <div class="mui-content">
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell infraCell infraCell_big" >
                    <p class="p_strong">退款原因:取消订单</p>
                    <p>您取消了订单，根据收费规则，将扣除未住1天的定金为违约金支付给房东，定金不足以实际支付为准</p>
                </li>
                <li class="mui-table-view-cell infraCell infraCell_biger" >
                    <p><span class="span_bold span_medium span_black">现 金 支 付 </span><span class="span_right">￥{{cancel_price.cash_all}}</span></p>
                    <p><span>房费(实住天)</span><span class="span_right">￥{{cancel_price.cost}}</span></p>
                    <p><span>违 约 金</span><span>  &nbsp; &nbsp; &nbsp; &nbsp;</span><span class="span_right">￥{{cancel_price.breach}}</span></p>
                    <p><span class="span_bold span_large span_black"> 退 款 合 计</span><span class="span_right">￥{{cancel_price.refound}}</span></p>
                </li>
                <li class="mui-table-view-cell groupCell cell_big">
                    <p>退款将根据支付方式原路返回，支付宝微信为1个工作日到账；网银信用卡为1--7个工作日到账</p>
                </li>
            </ul>
        </div>
    </main>






    <footer class="pub_foot" @click="show_page2" v-show="pre_page.type1" v-cloak>
        <h1 class="fxj-title">下一步</h1>
    </footer>

    <footer class="pub_foot" v-show="pre_page.type2" v-cloak>
        <h1 class="fxj-title">下一步</h1>
    </footer>


</main>






</main>
@import "js.html"
<script src="../lib/js/city.js"></script>

<script src="../script/jquery.js"></script>
<script src="../script/mobileSelect.js"></script>
<script src="../script/cancel_order.js"></script>
</body>

@import "footer.html"